<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html ng-app="duo">
 <head>
	<meta http-equiv="X-UA-Compatible" content="IE=9">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Shenzhen Santiago Tech Co., Ltd.</title>
	<link href="images/favicon.ico" type="images/x-icon" rel="shortcut icon" />
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="http://apps.bdimg.com/libs/animate.css/3.1.0/animate.min.css" />
	<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript" src="/webapp/frame/js/jquery.flexslider.js"></script> 
	<script>window.location.href='#/home';</script>
 </head>
 <body ng-controller="main">
	<div id="nav">
		<div class="logo">
			<img src="images/logo2.png" alt="圣地亚哥logo">
		</div>

		<div class="nav-item">
			<ul class="first">

				<li ng-repeat="nav in navList" class="first-item">
					<span ng-if="nav.level == 0" ui-sref="{{nav.url}}">{{nav.name}}</span>
					<span  ng-if="nav.level == 1" >{{nav.name}}</span>
					<ul ng-if="nav.level == 1">
						<li   ng-repeat="second in nav.child" class="second-item">
							<img style="width:60px;height:90px;" class="top" src="{{second.img}}" ui-sref="{{second.url}}" alt="">
							<span style="width:130px;text-align:center;" class="bottom"  ui-sref="{{second.url}}" >{{second.name}}</span>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>

	<div id="view" ui-view=""></div>
	<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;color:rgba(83,83,83);">
		Copyright © Earl&nbsp;Technology. All Rights Reserved
	</div>

	<script>
// ———————— angular代码 START ————————


var app = angular.module('duo', ["ui.router"]);
		// 路由，后台jsp动态生成
		app.config(function($stateProvider) {
		  $stateProvider
		  <%
		  String[]ar=(String[])session.getAttribute("gg");
		  if(ar!=null){
		  for(int i=0; i <ar.length;i++){%> 
		    .state('<%=ar[i]%>', {
		      url: '/<%=ar[i]%>',
		      templateUrl: '/webapp/<%=ar[i]%>/index.html'
		    })
		    <%}%>
		    <%}%>

		  ;
		})

app.directive('loadScript', function() { 
return { 
restrict: 'EA', 
terminal: true, 
link: function(scope, element, attr) { 
if (attr.ngSrc) { 
var s = document.createElement('script'); 
s.src = attr.ngSrc; 
document.body.appendChild(s); 
} 
} 
}; 
}); 
app.controller('main', function($scope, $rootScope ,$state, $http) {
	// 此处地址换成对应接口地址
	$http.get("/webapp/getAllMenu1")
    .success(function (response) {

    	var realData = response.allmenu;
		var navList = new Array();

		// 数据转换，将接口数据转换成标准数据
		for(var i=0;i<realData.length;i++){

			if(realData[i].child == null){
				// 如果没有二级导航，即为一级导航，例如首页
				var tempItem = {
					"name": realData[i].menu.menuName,
			    	 "level": 0,
			     	 "url": realData[i].menu.menuChain,
			     	 "order": realData[i].menu.menuOrder,
			     	 "child": ""
				};
				navList.push(tempItem);

			}else{
				// 若有二级导航，则遍历二级导航
				var tempChildList = new Array();
				for(var x=0;x<realData[i].child.length;x++){
						var tempChildItem = {
						"name": realData[i].child[x].a.menuName,
				         "level": 2,
				         "url": realData[i].child[x].a.menuChain,
				         "img": "/"+realData[i].child[x].a.menuPicture
					}
					tempChildList.push(tempChildItem);
				}
				tempChildList.sort(function(a,b){return a.order>b.order?1:-1});
				
				var tempItem = {
					"name": realData[i].menu.menuName,
			    	 "level": 1,
			     	 "url": realData[i].menu.menuChain,
			     	 "order": realData[i].menu.menuOrder,
			     	 "child": tempChildList
				};
				navList.push(tempItem);
				
			}
			navList.sort(function(a,b){return a.order>b.order?1:-1});
		}
		$scope.navList = navList;

    })
    .error(function(response){

    	// 接口访问失败时（测试数据）［模拟用］
    	// 0为无二级分类的一级分类 1为有二级分类的一级分类  2为二级分类
    	var data ={
			  "allmenu": [
			    {
			      "menu": {
			        "menu": null,
			        "menuChain": "aaa",
			        "menuId": 777,
			        "menuName": "一级菜单1",
			        "menuPhonechain": "aaa",
			        "menuPicture": "webapp/photo/94.7350136327216712906030_124355855000_2.png",
			        "menuOrder": 3,
			        "menus": []
			      },
			      "child": [
			        {
			          "a": {
			            "menu": null,
			            "menuChain": "aaa",
			            "menuId": 226,
			            "menuName": "二级菜单1",
			            "menuPhonechain": "aaa",
			            "menuPicture": "webapp/photo/94.7350136327216712906030_124355855000_2.png",
			            "menuOrder": 1,
			            "menus": []
			          }
			        },
			        {
			          "a": {
			            "menu": null,
			            "menuChain": "aaa",
			            "menuId": 227,
			            "menuName": "二级菜单2",
			            "menuPhonechain": "aaa",
			            "menuPicture": "webapp/photo/2.294188944240660412906030_124355855000_2.png",
			            "menuOrder": 2,
			            "menus": []
			          }
			        }
			      ]
			    },
			    {
			      "menu": {
			        "menu": null,
			        "menuChain": "aaa",
			        "menuId": 228,
			        "menuName": "一级菜单2",
			        "menuPhonechain": "aaa",
			        "menuPicture": "webapp/photo/2.294188944240660412906030_124355855000_2.png",
			        "menuOrder": 2,
			        "menus": []
			      }
			    }
			  ]
			};
		var realData = data.allmenu;
		var navList = new Array();

		// 数据转换，将接口数据转换成标准数据
		for(var i=0;i<realData.length;i++){

			if(realData[i].child == null){
				// 如果没有二级导航，即为一级导航，例如首页
				var tempItem = {
					"name": realData[i].menu.menuName,
			    	 "level": 0,
			     	 "url": realData[i].menu.menuChain,
			     	 "order": realData[i].menu.menuOrder,
			     	 "child": ""
				};
				navList.push(tempItem);

			}else{
				// 若有二级导航，则遍历二级导航
				var tempChildList = new Array();
				for(var x=0;x<realData[i].child.length;x++){
						var tempChildItem = {
						"name": realData[i].child[x].a.menuName,
				         "level": 2,
				         "url": realData[i].child[x].a.menuChain,
				         "img": realData[i].child[x].a.menuPicture
					}
					tempChildList.push(tempChildItem);
				}
				tempChildList.sort(function(a,b){return a.order>b.order?1:-1});

				var tempItem = {
					"name": realData[i].menu.menuName,
			    	 "level": 1,
			     	 "url": realData[i].menu.menuChain,
			     	 "order": realData[i].menu.menuOrder,
			     	 "child": tempChildList
				};
				navList.push(tempItem);
				
			}
			navList.sort(function(a,b){return a.order>b.order?1:-1});
		}
		$scope.navList = navList;
   //  	标准格式
   
		
    });
})
// ———————— angular代码 END ————————

// ———————— jQuery代码 START ————————
    $(function() {
    	var num =0;
    	var navTimer = setInterval(function(){
    		$(".nav-item  .first li").hover(
                function() {
                	$(this).find("ul").width($(window).width()); 
                    
                    $(this).find("ul").addClass('product-show');
                    $(this).find("ul").show(100);
                },
                function() {
                    $(this).find("ul").hide(300);
                    $(this).find("ul").removeClass('product-show');
                }
        );

        $(".nav-item  .first li ul li").hover(
                function() {
                    $(".nav-item  .first li ul").addClass('nav-ul-on');
                },
                function() {
                    $(".nav-item  .first li ul").removeClass('nav-ul-on');
                }
        );
        num++;
        if(num == 10){
        	clearInterval(navTimer);
        }
    },500);

    });
// ———————— jQuery代码 END ————————

</script>
 </body>
</html>
